<template>
  <van-button
    class="liked"
    :icon="value === 1 ? 'good-job' : 'good-job-o'"
  />
</template>

<script>
// 导入点赞和取消点赞的接口请求
import { thumbsUpArticle, cancelThumbsUpArticle } from '@/api/users'
export default {
  name: 'ThumbsUpArticle',
  props: {
    // 父组件传递服务器文章详情中的attitude
    value: {
      type: [Number, String],
      required: true
    },
    // 父组件传递当前文章ID
    carticleID: {
      type: [Number, String, Object],
      required: true
    }
  },
  methods: {
    async switchThumbsUp () {
      try {
        if (this.value !== 1) {
          await thumbsUpArticle(this.carticleID)
        } else {
          await cancelThumbsUpArticle(this.carticleID)
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.liked {
  .good-job {
    color: #e5645f;
  }
}
</style>
